<template>
    <div class="manage">
        <el-dialog
            :title="operateType === 'add' ? '新增用户' : '更新用户'"
            :visible.sync="isShow">
            <common-form :formLabel="operateFormLabel" :form="operateForm" :inLine="true" ref="form"></common-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </el-dialog>
        <div class="manage-header">
            <el-button type="primary" @click="addUser">+ 新增</el-button>
            <common-form :formLabel="searchFormLabel" :form="searchForm" :inLine="true" ref="searchForm">
                <el-button type="primary" @click="getList">搜索</el-button>
            </common-form>
        </div>
        <common-table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList" @edit="editUser" @del="delUser"></common-table>
    </div>
</template>
<script>
import CommonForm from '../../components/CommonForm.vue';
import CommonTable from '../../components/CommonTable.vue';
import { getUser } from '../../api/data.js';

export default {
    name: 'user',
    components: {
        CommonForm,
        CommonTable
    },
    data() {
        return {
            operateType: '',
            isShow: false,
            operateFormLabel: [
                {
                    model: 'name',
                    label: '姓名',
                    type: 'input'
                },
                {
                    model: 'age',
                    label: '年龄',
                    type: 'input'
                },
                {
                    model: 'sex',
                    label: '性别',
                    type: 'select',
                    opts: [
                        {
                            label: '男',
                            value: 1
                        },
                        {
                            label: '女',
                            value: 0
                        }
                    ]
                },
                {
                    model: 'birth',
                    label: '出生日期',
                    type: 'date'
                },
                {
                    model: 'addr',
                    label: '地址',
                    type: 'input'
                }
            ],
            operateForm: {
                name: '',
                addr: '',
                age: '',
                brith: '',
                sex: ''
            },
            searchFormLabel: [
                {
                    model: 'keyword',
                    label: '',
                    type: 'input'
                }
            ],
            searchForm: {
                keyword: ''
            },
            searchInput: '',
            tableData: [],
            tableLabel: [
                {

                    prop: 'name',
                    label: '姓名'
                },
                {

                    prop: 'age',
                    label: '年龄'
                },
                {

                    prop: 'sex',
                    label: '性别'
                },
                {

                    prop: 'birth',
                    label: '出生日期',
                    width: 200
                },
                {

                    prop: 'addr',
                    label: '地址',
                    width: 320
                }
            ],
            config: {
                page: 1,
                total: 30
            }
        }
    },
    methods: {
        confirm() {
            if(this.operateType === 'add') {
                this.$axios.post('/user/add', this.operateForm).then(res => {
                    res; //防未调用报错
                    this.isShow = false;
                    this.getList();
                }).catch(err => { console.log('error', err); });
            } else {
                this.$axios.post('/user/edit', this.operateForm).then(res => {
                    res; //防未调用报错
                    this.isShow = false;
                    this.getList();
                }).catch(err => { console.log('error', err); });
            }
        },
        addUser() {
            this.operateType = 'add';
            this.operateForm = {
                name: '',
                addr: '',
                age: '',
                brith: '',
                sex: ''
            };
            this.isShow = true;
        },
        getList(name = '') {
            this.config.loading = true;
            name ? (this.config.page = 1) : '';
            getUser({
                page: this.config.page,
                name
            }).then(res => {
                console.log(res,'res');
                this.tabelDate = res.list.map(item => {
                    item.sexLabel = item.sex === 0 ? '女' : '男';
                    return item;
                });
                this.config.total = res.count;
                this.config.loading = false;
            }).catch(err => { console.log('error', err); });
        },
        editUser(row) {
            this.operateType = 'edit';
            this.isShow = true;
            this.operateForm = row;
        },
        delUser(row) {
            this.$confirm('此操作将永久删除该文件,是否继续?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const id = row.id;
                this.$axios.get('user/del', {
                    params: {
                        id
                    }
                }).then(res => {
                    res; //防未调用报错
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.getList();
                }).catch(err => { console.log('error', err); });
            });
        }
    },
    created() {
        this.getList();        
    }
}
</script>
<style lang="less" scoped>
    .manage {
        margin-top: 20px;
    }
    .manage-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
</style>